// Content.js
import React, { useState, useEffect } from 'react'
import {
  Layout,
  Card,
  DatePicker,
  List,
  Table,
  Select,
  Button,
  message,
} from 'antd'
import { DownOutlined } from '@ant-design/icons'
import moment from 'moment'
import dayjs from 'dayjs'
import './ContentComponent.scss'
import FormComponents from '../formComponents/FormComponents'
import timeSetting from '../../timeSetting/timeStting'
const { Content } = Layout

const ContentComponent = () => {
  const [userName, setUserName] = useState('Allen, Joe') //用户名称
  const [userNameIs, setUserNameIs] = useState('Joe Allen’s') //用户的
  const [attendanceRate, setAttendanceRate] = useState('94.9%') //出席率
  const [computerIdleTime, setComputerIdleTime] = useState('0.67%') //计算机空闲时间
  const [hTime, sethTime] = useState(timeSetting.getHTime())
  const [startTime, setStartTime] = useState(timeSetting.getCurrentTime())
  const currentDate = moment().format('MM/DD/YYYY') //实时时间
  const beforeDate = moment().format('MMM D, YYYY') //前时间
  const afterDate = moment().format('MMM D, YYYY') //后时间

  useEffect(() => {
    const timer = setInterval(() => {
      sethTime(timeSetting.getHTime())
      setStartTime(timeSetting.getCurrentTime())
    }, 1000) // 每秒更新一次

    // 清理定时器
    return () => clearInterval(timer)
  }, [])

  // 考勤记录下拉菜单
  const selectOptions = [
    {
      label: 'Clocked In / On-Duty clockedIn',
      value: 'clockedIn',
    },
    {
      label: 'Clocked Out / Off-Duty',
      value: 'clockedOut',
    },
    {
      label: 'Break',
      value: 'Break',
    },
    {
      label: 'Absent / Not Clocked In',
      value: 'Absent',
    },
    {
      label: 'work overtime',
      value: 'workOvertime',
    },
  ]

  // 考勤记录点击事件
  const selectAttendanceChange = (value) => {
    console.log(`selected ${value}`)
  }

  //
  const data = [
    {
      title: `${userNameIs} Accumulated Time`,
    },
  ]

  // 用户的累计时间data
  const accumulatedTimeData = [
    {
      key: '1',
      Week: '36.25Hrs',
      PayPeriod: '76.25Hrs',
    },
  ]

  // 用户的累计时间columns
  const accumulatedTimeColumns = [
    {
      title: `Week (${beforeDate}-${afterDate})`,
      dataIndex: 'Week',
      key: 'Week',
      align: 'center',
      render: (text) => <span>{text}</span>,
    },
    {
      title: `Pay Period (${beforeDate}-${afterDate})`,
      dataIndex: 'PayPeriod',
      key: 'PayPeriod',
      align: 'center',
      render: (text) => <span>{text}</span>,
    },
  ]

  return (
    <Content className="content">
      <Card className="user-card">
        <div className="user-info">
          {/* 用户名称 */}
          <span className="user-info-span">
            <h1>{userName}</h1>
          </span>
          {/* 出席率 */}
          <span className="user-info-span">
            <h2>{attendanceRate}</h2>
            <h3>Attendance Rate</h3>
          </span>
          {/* 计算机空闲时间 */}
          <span className="user-info-span">
            <h2>{computerIdleTime}</h2>
            <h3>Computer idle Time</h3>
          </span>
        </div>

        <div className="datePicker">
          <h3>Data:</h3>
          <DatePicker
            format={{
              format: 'MM/DD/YYYY',
              type: 'mask',
            }}
            defaultValue={dayjs(currentDate, 'MM/DD/YYYY')}
          />
        </div>
      </Card>
      <div className="attendanceRecord">
        <div className="attendanceRecord-left">
          <List
            dataSource={data}
            renderItem={(item) => (
              <List.Item>
                <Card title={item.title} className="accumulatedTimeTable-card">
                  <Table
                    className="accumulatedTimeTable"
                    columns={accumulatedTimeColumns}
                    dataSource={accumulatedTimeData}
                    pagination={false}
                    size="small"
                    bordered
                  />
                </Card>
              </List.Item>
            )}
          />
        </div>
        <div className="attendanceRecord-right">
          <div className="attendanceRecord-Button">
            <Select
              placeholder="OHTA(948)"
              style={{
                width: 200,
              }}
              onChange={selectAttendanceChange}
              options={selectOptions}
            />
            <Button style={{ margin: '0 15px' }} type="primary" danger>
              {' '}
              Clock Out
            </Button>
          </div>
          <div className="startTime">
            <p>{hTime}</p>
            <p>Start time: {startTime}</p>
          </div>
        </div>
      </div>
      <FormComponents />
    </Content>
  )
}

export default ContentComponent
